<template>
    <div class="content">
        <div class="left">
            <tree ref="tree" :treeData="treeData" @sendData="getData" @getCheckData="getCheckData" />
        </div>
        <div class="top" v-if="type == 'd'">
            <el-tabs v-model="active" class="tabs-item-style" type="card">
                <el-tab-pane v-for="item in menus_1" :key="item.name" :name="item">
                    <template #label>
                        <div @click="handleActive(item, 'd')">
                            <i :class="`iconfont ${item.icon}`"></i>
                            <span>{{ item.label }}</span>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="wave" v-if="type == 'd'">
            <device ref="device" :active="active1" :device_id="device_id" />
        </div>

        <div class="top" v-if="type == 's'">
            <el-tabs v-model="active" class="tabs-item-style" type="card">
                <el-tab-pane v-for="item in menus" :key="item.name" :name="item">
                    <template #label>
                        <div @click="handleActive(item, 's')">
                            <i :class="`iconfont ${item.icon}`"></i>
                            <span>{{ item.label }}</span>
                        </div>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="wave" v-if="type == 's'">
            <com-list ref="comlist" :active="active" @clearAllCheckedNodes="clearAllCheckedNodes" @changeZfmenu="changeZfmenu" />
        </div>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import tree from './tree/index.vue'
import { menus, menus_1 } from './config.js'
import comList from './comList/index.vue'
import device from './device/index.vue'
import { mapState } from 'vuex'

import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            treeData: [],
            sensorInfo: null,
            menus: [],
            menus_1: [],
            active: null,
            active1: null,
            type: 's',
            device_id: 0,
            emptyTree: null,
            menuClass: 'menuList',
        }
    },
    components: {
        tree,
        comList,
        device,
    },
    computed: {
        ...mapState('backstage', ['sys_wave']),
    },
    methods: {
        clearAllCheckedNodes() {
            this.$refs.tree.clearAllCheckedNodes()
            this.treeData = deepClone(this.emptyTree)
        },
        getTree(debug) {
            requestApi('post', 'diagnosis/tree', debug == 1 ? { debug: 1 } : {}, true).then((res) => {
                if (res.data.code == 0) {
                    this.emptyTree = res.data.data
                    this.treeData = deepClone(this.emptyTree)
                    if (this.treeData.length !== 0) {
                        var data = this.treeData[0]

                        if (this.$route.query.sensor_id) {
                            let sensor_id = Number(this.$route.query.sensor_id)
                            let device_id = Number(this.$route.query.device_id)
                            this.$refs.comlist.setDevice(device_id)
                            this.device_id = device_id
                            this.$nextTick(() => {
                                this.pushKey('d' + device_id)
                                this.setCurrentKey('s' + sensor_id)
                                this.defaultGetdata('s' + sensor_id)
                            })
                        } else {
                            this.$nextTick(() => {
                                while (1) {
                                    if (data.type == 'd') {
                                        this.device_id = data.value
                                        this.$refs.comlist.setDevice(this.device_id)
                                        this.sensor_id = data.children[0].value
                                        this.pushKey('d' + this.device_id)
                                        this.setCurrentKey('s' + this.sensor_id)
                                        this.defaultGetdata('s' + this.sensor_id)
                                        break
                                    }
                                    data = data.children[0]
                                }
                            })
                        }
                    }
                }
            })
        },
        btnClick(t) {
            // if (t == 'r') {
            //     this.menuClass = 'menuList menuList_1'
            // } else this.menuClass = 'menuList'
        },

        // 获取树节点点击 节点
        getData(e, node) {
            let { type, value } = e
            this.type = type
            if (type == 's') {
                requestApi('get', `sensor/details?id=${value}`, null, true).then((res) => {
                    if (res.data.code == 0) {
                        this.sensorInfo = res.data.data
                        let wavetags = []
                        if (this.sensorInfo.sys_wave) {
                            const arr1 = this.sensorInfo.sys_wave.split(',').map(Number)
                            wavetags = this.sys_wave.filter((item) => arr1.includes(item.id))
                        }
                        this.$refs.comlist.setSensor(res.data.data, wavetags)
                        let device_id = node.parent.data.value
                        this.$refs.comlist.setDevice(device_id)
                        this.device_id = device_id
                    } else {
                        this.sensorInfo = null
                    }
                })
            } else if (type == 'd') {
                this.device_id = e.value
                this.$refs.comlist.setDevice(e.value)
            }
        },
        getCheckData(e, a) {
            let { type, value } = e
            if (type == 's') {
                requestApi('get', `sensor/details?id=${value}`, null, true).then((res) => {
                    if (res.data.code == 0) {
                        this.$refs.comlist.setCheckSensor(res.data.data, a)
                    } else {
                        this.$refs.comlist.setCheckSensor(e, a)
                    }
                })
            }
        },
        removePrefix(a) {
            if (a.startsWith('Z_') || a.startsWith('X_') || a.startsWith('Y_')) {
                return a.substring(2)
            } else {
                return a
            }
        },
        defaultGetdata(value) {
            value = value.substring(1)
            requestApi('get', `sensor/details?id=${value}`, null, true).then((res) => {
                if (res.data.code == 0) {
                    this.sensorInfo = res.data.data
                    let wavetags = []
                    if (this.sensorInfo.sys_wave) {
                        const arr1 = this.sensorInfo.sys_wave.split(',').map(Number)
                        wavetags = this.sys_wave.filter((item) => arr1.includes(item.id))
                        if (arr1.includes(6)) this.changeZfmenu(true)
                    }

                    this.$refs.comlist.setSensor(res.data.data, wavetags)
                } else this.sensorInfo = null
            })
        },
        handleActive(e, t) {
            if (t === 'd') {
                this.active1 = e
            } else {
                this.active = e
                this.$refs.comlist.handleActiveChange(e)
            }
        },
        setCurrentKey(value) {
            this.$refs.tree.setCurrentKey(value)
        },
        pushKey(key) {
            this.$refs.tree.pushKey(key)
        },
        changeZfmenu(boole) {
            if (!boole) {
                this.menus = this.menus.filter((item) => item.value != -1)
            } else {
                this.menus = deepClone(menus)
            }
        },
    },
    created() {
        let { key, debug } = this.$route.query

        this.getTree(debug)
        this.menus = deepClone(menus)
        this.menus_1 = menus_1
        let a = {
            zAcceleration: 'acc_rms',
            yAcceleration: 'acc_rms',
            zAcceleration: 'acc_rms',
            zSpeed: 'vel_rms',
            xSpeed: 'vel_rms',
            ySpeed: 'vel_rms',
            zDisplacement: 'dis_pp',
            xDisplacement: 'dis_pp',
            yDisplacement: 'dis_pp',
            mean: 'acc_mean',
            maxValue: 'acc_max',
            minValue: 'acc_min',
            peakTopeak: 'acc_pp',
            zPeakvalue: 'acc_peak',
            std: 'acc_root',
            average: 'acc_ave',
            waveformF: 'acc_sha',
            peakF: 'acc_cre',
            zKurtosisvalue: 'acc_kur',
            xKurtosisvalue: 'acc_kur',
            yKurtosisvalue: 'acc_kur',
            skewedF: 'acc_ske',
            impulseF: 'acc_imp',
            zMarginIndicator: 'acc_cle',
            yMarginIndicator: 'acc_cle',
            xMarginIndicator: 'acc_cle',
            envelopeF: 'acc_env',
            temperature: 'tem',
        }
        let key1 = a[key] || key
        if (key1 && key1 !== 'acc_wave') {
            this.active = this.menus[2]
            key1 = this.removePrefix(key1)
            this.$nextTick(() => this.$refs.comlist.setDefaultKey(key1))
        } else this.active = this.menus[0]
        this.active1 = this.menus_1[0]
    },
}
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;

    .left {
        width: 280px;
        height: 100%;
        position: absolute;
        z-index: 99;
    }
    .top {
        position: absolute;
        left: 17.5rem;
        height: 31px;
        background-color: #0c1d4e;
        width: calc(100% - 280px);
        overflow: hidden;
        ::v-deep(.el-tabs__nav-prev) {
            padding: 0;
            line-height: 30px;
            height: 30px;

            color: white !important;
            background-color: #409eff !important;
            text-align: center;
        }
        ::v-deep(.el-tabs__nav-next) {
            padding: 0;
            line-height: 30px;
            height: 30px;

            color: white !important;
            background-color: #409eff !important;
        }

        .tabs-item-style {
            border-bottom: none;
            ::v-deep(.el-tabs__item) {
                transition: 0.4s;
                font-size: 14px !important;
                padding: 0 10px !important;
                border-right: none;
                border-radius: 4px;
                user-select: none;
                // color: white !important;
                height: 30px;
                line-height: 30px;
                background-image: none !important;

                background-color: transparent !important;
                border: 1px solid #409eff;
                .iconfont {
                    color: white !important;
                }
                &:hover {
                    color: white !important;
                    background-color: #409eff !important;
                }
                &.is-active {
                    color: white !important;
                    background-color: #409eff !important;
                    &:before {
                        background-color: #409eff;
                    }
                }
            }
        }
        .btn {
            position: absolute;
            width: 40px;
            z-index: 99;
        }
        .btnl {
            left: 0px;
        }
        .btnr {
            right: 0;
        }
        .menuList_1 {
            // right: 0 !important;
            transform: translateX(-50%);
        }
    }

    .menus {
        position: absolute;
        left: 280px;
        height: 31px;

        width: 100%;
        background-color: #0c1d4e;
        padding: 2px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        // border-bottom: 1px solid rgb(14, 118, 241);
        font-size: 14px;
        overflow-x: hidden;

        .menu {
            height: 28px;
            padding: 2px 6px;
            line-height: 28px;
            color: #d4e4f1;
            margin-left: 4px;
            cursor: pointer;
            border-radius: 4px;
        }
        .menu_a {
            background-color: #0f75f0;
        }
    }
    .wave {
        height: calc(100% - 32px);
        width: calc(100% - 280px);
        left: 280px;
        bottom: 0;
        float: left;
        position: absolute;
        border-top: 1px solid rgb(14, 118, 241);
    }
    .iconfont_1 {
        color: white;
    }
}
@media (min-width: 1500px) {
    .btn {
        display: none;
    }
    .menuList {
        left: 0 !important;
    }
}
</style>
